<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主界面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-black text-white h-screen overflow-hidden">
    <!-- 摄像头预览背景 -->
    <div class="absolute inset-0 bg-cover bg-center" 
         style="background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=800&fit=crop');">
        <div class="absolute inset-0 bg-black bg-opacity-30"></div>
    </div>

    <!-- 顶部状态栏 -->
    <div class="relative z-10 flex justify-between items-center p-4 pt-12">
        <!-- 程控电源状态 -->
        <div class="status-indicator bg-black bg-opacity-50 rounded-full px-3 py-2">
            <div id="powerStatusDot" class="status-dot status-disconnected"></div>
            <span id="powerStatusText" class="text-sm font-medium text-red-500">未连接电源</span>
        </div>

        <!-- 当前时间 -->
        <div class="bg-black bg-opacity-50 rounded-full px-3 py-2" id="timeDisplay">
            <span class="text-sm font-medium" id="currentTime">14:30</span>
        </div>

        <!-- 录制计时器 -->
        <div class="bg-black bg-opacity-50 rounded-full px-3 py-2 hidden" id="recordingTimer">
            <span class="text-red-500 mr-1">•</span>
            <span class="text-sm font-medium" id="recordingTime">00:00</span>
        </div>
    </div>

    <!-- 检测区域框架（可拖动） -->
    <div class="absolute inset-0 z-5">
        <!-- 仪表盘区域 -->
        <div id="dashboardArea" class="absolute top-32 left-8 w-32 h-24 border-2 border-blue-400 border-dashed rounded-lg cursor-move" draggable="true">
            <div class="absolute -top-6 left-0 text-xs text-blue-400 bg-black bg-opacity-50 px-2 py-1 rounded" id="dashboardLabel">请长按编辑名称</div>
            <!-- 添加调整大小的手柄 -->
            <div class="resize-handle absolute bottom-0 right-0 w-4 h-4 bg-blue-400 bg-opacity-50 rounded-bl-none rounded-tr-none rounded-br-lg cursor-se-resize"></div>
        </div>
        
        <!-- MDU区域 -->
        <div id="mduArea" class="absolute top-32 right-8 w-32 h-24 border-2 border-green-400 border-dashed rounded-lg cursor-move" draggable="true">
            <div class="absolute -top-6 right-0 text-xs text-green-400 bg-black bg-opacity-50 px-2 py-1 rounded" id="mduLabel">请长按编辑名称</div>
            <!-- 添加调整大小的手柄 -->
            <div class="resize-handle absolute bottom-0 right-0 w-4 h-4 bg-green-400 bg-opacity-50 rounded-bl-none rounded-tr-none rounded-br-lg cursor-se-resize"></div>
        </div>
    </div>

    <!-- 底部控制面板 -->
    <div class="absolute bottom-0 left-0 right-0 z-10 bg-black bg-opacity-70 backdrop-blur-md p-6 pb-8">
        <div class="flex items-center justify-between px-8">
            <!-- 设置按钮 -->
            <button onclick="parent.showPage('settings')" class="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 text-gray-300 hover:text-white transition-all">
                <i class="fas fa-cog text-xl"></i>
            </button>

            <!-- 录制按钮 - 红色圆点带白色外圈 -->
            <button id="recordButton" class="record-button w-20 h-20 bg-white rounded-full flex items-center justify-center hover:bg-gray-200 transition-all" onclick="startRecording()">
                <div id="recordInner" class="w-16 h-16 bg-red-500 rounded-full transition-all duration-300"></div>
            </button>

            <!-- 历史记录按钮 -->
            <button onclick="parent.showPage('history')" class="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center hover:bg-gray-600 text-gray-300 hover:text-white transition-all">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </button>
        </div>

        <!-- 快捷信息 -->
        <div class="mt-4 flex justify-center space-x-6 text-xs text-gray-300">
            <div class="text-center cursor-pointer" onclick="showRecordTimeModal()">
                <div class="font-semibold">录制时长</div>
                <div id="recordTimeDisplay">25秒</div>
            </div>
            <div class="text-center cursor-pointer" id="screenTypeDisplay" onclick="showScreenTypeModal()">
                <div class="font-semibold">检测区域</div>
                <div>双联屏</div>
            </div>
            <div class="text-center">
                <div class="font-semibold">今日测试</div>
                <div>0次</div>
            </div>
        </div>
    </div>

    <!-- 车机类型选择弹窗 -->
    <div id="screenTypeModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden" style="border-radius: 30px;">
        <div class="bg-gray-800 rounded-xl p-6 max-w-sm w-full mx-4 slide-up">
            <div class="text-center mb-4">
                <div class="text-xl font-bold mb-2">选择车机类型</div>
                <div class="text-sm text-gray-300">请选择您要测试的车机类型</div>
            </div>
            
            <div class="space-y-3">
                <button class="screen-type-option w-full bg-gray-700 hover:bg-blue-600 border border-gray-600 rounded-lg px-4 py-3 text-left transition-all" data-type="single">
                    <div class="font-semibold">单屏车机</div>
                    <div class="text-sm text-gray-400">仅检测一个区域</div>
                </button>
                <button class="screen-type-option w-full bg-gray-700 hover:bg-blue-600 border border-gray-600 rounded-lg px-4 py-3 text-left transition-all active" data-type="dual">
                    <div class="font-semibold">双联屏车机</div>
                    <div class="text-sm text-gray-400">检测仪表盘和MDU两个区域</div>
                </button>
                <button class="screen-type-option w-full bg-gray-700 hover:bg-blue-600 border border-gray-600 rounded-lg px-4 py-3 text-left transition-all" data-type="triple">
                    <div class="font-semibold">三联屏车机</div>
                    <div class="text-sm text-gray-400">检测三个区域</div>
                </button>
            </div>
            
            <div class="flex justify-center space-x-4 mt-6">
                <button id="screenTypeCancel" class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                <button id="screenTypeConfirm" class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
            </div>
        </div>
    </div>

    <!-- 录制时长设置弹窗 -->
    <div id="recordTimeModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-gray-800 rounded-xl p-6 max-w-sm w-full mx-4 slide-up">
            <div class="text-center mb-4">
                <div class="text-xl font-bold mb-2">录制时长设置</div>
                <div class="text-sm text-gray-300">设置单次录制的时长</div>
            </div>
            
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-300">录制时长</span>
                    <span class="text-blue-400 font-semibold" id="recordTimeValue">25秒</span>
                </div>
                <input type="range" min="10" max="60" value="25" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" id="recordTimeSlider">
                <div class="flex justify-between text-xs text-gray-400">
                    <span>10秒</span>
                    <span>60秒</span>
                </div>
            </div>
            
            <div class="flex justify-center space-x-4 mt-6">
                <button id="recordTimeCancel" class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                <button id="recordTimeConfirm" class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
            </div>
        </div>
    </div>

    <!-- 自定义弹窗 -->
    <div id="customAlert" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-gray-800 rounded-xl p-6 max-w-xs w-full mx-4 slide-up">
            <div class="text-center mb-4">
                <div id="alertTitle" class="text-xl font-bold mb-2">提示</div>
                <div id="alertMessage" class="text-sm text-gray-300">操作成功</div>
            </div>
            <div class="flex justify-center space-x-4">
                <button id="alertCancel" class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                <button id="alertConfirm" class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
            </div>
        </div>
    </div>

    <!-- 名称编辑弹窗 -->
    <div id="nameEditModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-gray-800 rounded-xl p-6 max-w-sm w-full mx-4 slide-up">
            <div class="text-center mb-4">
                <div class="text-xl font-bold mb-2">编辑区域名称</div>
                <div class="text-sm text-gray-300 mb-4" id="nameEditTarget">仪表盘区域</div>
            </div>
            
            <div class="space-y-4">
                <!-- 名称输入 -->
                <div>
                    <label class="block text-sm text-gray-300 mb-2">区域名称</label>
                    <input type="text" id="areaNameInput" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white focus:border-blue-400 focus:outline-none" placeholder="请输入区域名称">
                </div>
                
                <!-- RGB 滑块 -->
                <div>
                    <label class="block text-sm text-gray-300 mb-2">R (红色)</label>
                    <input type="range" min="0" max="255" value="0" class="w-full h-2 bg-red-700 rounded-lg appearance-none cursor-pointer" id="redSlider">
                    <div class="flex justify-between text-xs text-gray-400 mt-1">
                        <span>0</span>
                        <span id="redValue">0</span>
                        <span>255</span>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm text-gray-300 mb-2">G (绿色)</label>
                    <input type="range" min="0" max="255" value="0" class="w-full h-2 bg-green-700 rounded-lg appearance-none cursor-pointer" id="greenSlider">
                    <div class="flex justify-between text-xs text-gray-400 mt-1">
                        <span>0</span>
                        <span id="greenValue">0</span>
                        <span>255</span>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm text-gray-300 mb-2">B (蓝色)</label>
                    <input type="range" min="0" max="255" value="0" class="w-full h-2 bg-blue-700 rounded-lg appearance-none cursor-pointer" id="blueSlider">
                    <div class="flex justify-between text-xs text-gray-400 mt-1">
                        <span>0</span>
                        <span id="blueValue">0</span>
                        <span>255</span>
                    </div>
                </div>
                
                <!-- 十六进制颜色输入 -->
                <div>
                    <label class="block text-sm text-gray-300 mb-2">十六进制颜色</label>
                    <input type="text" id="hexColor" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white focus:border-blue-400 focus:outline-none" value="#000000">
                </div>
                
                <!-- 颜色预览 -->
                <div class="flex items-center justify-center">
                    <div id="colorPreview" class="w-16 h-16 rounded-lg border border-gray-600" style="background-color: #000000"></div>
                </div>
            </div>
            
            <div class="flex justify-center space-x-4 mt-6">
                <button id="nameEditCancel" class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                <button id="nameEditConfirm" class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">保存</button>
            </div>
        </div>
    </div>

    <script>
        let isRecording = false;
        let selectedScreenType = 'dual';
        let recordTime = 25;

        // 更新时间
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString('zh-CN', { 
                hour: '2-digit', 
                minute: '2-digit' 
            });
            document.getElementById('currentTime').textContent = timeString;
        }

        // 初始化
        updateTime();
        setInterval(updateTime, 1000);

        // 录制按钮点击效果
        function startRecording() {
            const recordButton = document.getElementById('recordButton');
            const recordInner = document.getElementById('recordInner');
            
            if (!isRecording) {
                // 开始录制
                isRecording = true;
                recordInner.classList.remove('rounded-full');
                recordInner.classList.add('rounded-sm');
                recordInner.style.width = '30px';
                recordInner.style.height = '30px';
                
                // 更改电源状态为已连接（绿色）
                document.getElementById('powerStatusDot').classList.remove('status-disconnected');
                document.getElementById('powerStatusDot').classList.add('status-connected');
                document.getElementById('powerStatusText').textContent = '电源已连接';
                document.getElementById('powerStatusText').classList.remove('text-red-500');
                document.getElementById('powerStatusText').classList.add('text-green-500');
                
                // 开始计时
                startTimer();
                
                // 这里可以添加实际的录制逻辑
                setTimeout(() => {
                    stopRecording();
                }, recordTime * 1000);
            } else {
                // 停止录制
                stopRecording();
            }
        }

        // 添加计时器相关变量和函数
        let timerInterval;
        let seconds = 0;
        
        // 开始计时器
        function startTimer() {
            // 显示计时器，隐藏时间
            document.getElementById('timeDisplay').classList.add('hidden');
            document.getElementById('recordingTimer').classList.remove('hidden');
            
            // 重置秒数
            seconds = 0;
            updateTimerDisplay();
            
            // 设置计时器
            timerInterval = setInterval(() => {
                seconds++;
                updateTimerDisplay();
            }, 1000);
        }
        
        // 停止计时器
        function stopTimer() {
            clearInterval(timerInterval);
            document.getElementById('recordingTimer').classList.add('hidden');
            document.getElementById('timeDisplay').classList.remove('hidden');
        }
        
        // 更新计时器显示
        function updateTimerDisplay() {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            document.getElementById('recordingTime').textContent = 
                `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }
        
        // 修改停止录制函数
        function stopRecording() {
            isRecording = false;
            const recordInner = document.getElementById('recordInner');
            recordInner.classList.remove('rounded-sm');
            recordInner.classList.add('rounded-full');
            recordInner.style.width = '64px';
            recordInner.style.height = '64px';
            
            // 更改电源状态为未连接（红色）
            document.getElementById('powerStatusDot').classList.remove('status-connected');
            document.getElementById('powerStatusDot').classList.add('status-disconnected');
            document.getElementById('powerStatusText').textContent = '未连接电源';
            document.getElementById('powerStatusText').classList.remove('text-green-500');
            document.getElementById('powerStatusText').classList.add('text-red-500');
            
            // 停止计时器
            stopTimer();
        }

        // 显示车机类型选择弹窗
        function showScreenTypeModal() {
            document.getElementById('screenTypeModal').classList.remove('hidden');
        }

        // 显示录制时长设置弹窗
        function showRecordTimeModal() {
            document.getElementById('recordTimeModal').classList.remove('hidden');
        }

        // 车机类型选择逻辑
        document.querySelectorAll('.screen-type-option').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.screen-type-option').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                selectedScreenType = this.dataset.type;
            });
        });

        document.getElementById('screenTypeConfirm').addEventListener('click', function() {
            updateScreenTypeDisplay();
            document.getElementById('screenTypeModal').classList.add('hidden');
        });

        document.getElementById('screenTypeCancel').addEventListener('click', function() {
            document.getElementById('screenTypeModal').classList.add('hidden');
        });

        // 录制时长设置逻辑
        const recordTimeSlider = document.getElementById('recordTimeSlider');
        const recordTimeValue = document.getElementById('recordTimeValue');

        recordTimeSlider.addEventListener('input', function() {
            recordTimeValue.textContent = this.value + '秒';
        });

        document.getElementById('recordTimeConfirm').addEventListener('click', function() {
            recordTime = parseInt(recordTimeSlider.value);
            document.getElementById('recordTimeDisplay').textContent = recordTime + '秒';
            document.getElementById('recordTimeModal').classList.add('hidden');
        });

        document.getElementById('recordTimeCancel').addEventListener('click', function() {
            document.getElementById('recordTimeModal').classList.add('hidden');
        });

        // 自定义弹窗函数
        function showAlert(title, message, confirmCallback, cancelCallback) {
            document.getElementById('alertTitle').textContent = title;
            document.getElementById('alertMessage').textContent = message;
            
            const alertElement = document.getElementById('customAlert');
            const confirmBtn = document.getElementById('alertConfirm');
            const cancelBtn = document.getElementById('alertCancel');
            
            alertElement.classList.remove('hidden');
            
            confirmBtn.onclick = function() {
                alertElement.classList.add('hidden');
                if (confirmCallback) confirmCallback();
            };
            
            cancelBtn.onclick = function() {
                alertElement.classList.add('hidden');
                if (cancelCallback) cancelCallback();
            };
        }

        // 检测区域拖动功能
        function makeDraggable(element) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            let isDragging = false;
            
            element.onmousedown = dragMouseDown;
            element.ontouchstart = dragTouchStart;

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            }

            function dragTouchStart(e) {
                e = e || window.event;
                pos3 = e.touches[0].clientX;
                pos4 = e.touches[0].clientY;
                document.ontouchend = closeDragElement;
                document.ontouchmove = elementTouchDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                isDragging = true;
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                element.style.top = (element.offsetTop - pos2) + "px";
                element.style.left = (element.offsetLeft - pos1) + "px";
            }

            function elementTouchDrag(e) {
                e = e || window.event;
                isDragging = true;
                pos1 = pos3 - e.touches[0].clientX;
                pos2 = pos4 - e.touches[0].clientY;
                pos3 = e.touches[0].clientX;
                pos4 = e.touches[0].clientY;
                element.style.top = (element.offsetTop - pos2) + "px";
                element.style.left = (element.offsetLeft - pos1) + "px";
            }

            function closeDragElement() {
                document.onmouseup = null;
                document.onmousemove = null;
                document.ontouchend = null;
                document.ontouchmove = null;
                
                // 延迟重置拖动状态，避免与长按冲突
                setTimeout(() => {
                    isDragging = false;
                }, 100);
            }
            
            // 返回拖动状态检查函数
            return function() {
                return isDragging;
            };
        }

        // 长按检测区域打开编辑器
        function setupLongPress(element, isDraggingCheck) {
            let pressTimer;
            let isLongPress = false;

            function startLongPress() {
                pressTimer = setTimeout(function() {
                    // 只有在没有拖动的情况下才触发长按
                    if (!isDraggingCheck()) {
                        isLongPress = true;
                        openNameEditor(element);
                    }
                }, 800); // 增加长按时间到800ms，避免与拖动冲突
            }

            function cancelLongPress() {
                clearTimeout(pressTimer);
                setTimeout(function() { isLongPress = false; }, 100);
            }

            element.addEventListener('mousedown', startLongPress);
            element.addEventListener('touchstart', startLongPress);
            element.addEventListener('mouseup', cancelLongPress);
            element.addEventListener('touchend', cancelLongPress);
            element.addEventListener('mouseleave', cancelLongPress);

            element.addEventListener('click', function(e) {
                if (isLongPress) {
                    e.preventDefault();
                    e.stopPropagation();
                }
            });
        }

        // 打开名称编辑器
        function openNameEditor(element) {
            const nameEditModal = document.getElementById('nameEditModal');
            const nameEditTarget = document.getElementById('nameEditTarget');
            const areaNameInput = document.getElementById('areaNameInput');
            const hexColor = document.getElementById('hexColor');
            const redSlider = document.getElementById('redSlider');
            const greenSlider = document.getElementById('greenSlider');
            const blueSlider = document.getElementById('blueSlider');
            const redValue = document.getElementById('redValue');
            const greenValue = document.getElementById('greenValue');
            const blueValue = document.getElementById('blueValue');
            const colorPreview = document.getElementById('colorPreview');
            
            // 设置目标区域名称
            const isInstrument = element.id === 'dashboardArea';
            const isMDU = element.id === 'mduArea';
            const isThird = element.id === 'thirdArea';
            
            if (isInstrument) {
                nameEditTarget.textContent = '仪表盘区域';
            } else if (isMDU) {
                nameEditTarget.textContent = 'MDU区域';
            } else if (isThird) {
                nameEditTarget.textContent = '第三区域';
            }
            
            // 获取当前名称
            const label = element.querySelector('.text-xs');
            areaNameInput.value = label.textContent === '请长按编辑名称' ? '' : label.textContent;
            
            // 获取当前边框颜色
            const computedStyle = window.getComputedStyle(element);
            const borderColor = computedStyle.borderColor;
            
            // 解析RGB值
            const rgbMatch = borderColor.match(/rgb\((\d+), (\d+), (\d+)\)/);
            if (rgbMatch) {
                const r = parseInt(rgbMatch[1]);
                const g = parseInt(rgbMatch[2]);
                const b = parseInt(rgbMatch[3]);
                
                // 设置滑块值
                redSlider.value = r;
                greenSlider.value = g;
                blueSlider.value = b;
                
                // 更新显示值
                redValue.textContent = r;
                greenValue.textContent = g;
                blueValue.textContent = b;
                
                // 设置十六进制值
                const hex = rgbToHex(r, g, b);
                hexColor.value = hex;
                
                // 更新预览
                colorPreview.style.backgroundColor = hex;
            }
            
            // 显示编辑器
            nameEditModal.classList.remove('hidden');
            
            // 设置确认按钮事件
            document.getElementById('nameEditConfirm').onclick = function() {
                let defaultName = '区域';
                if (isInstrument) defaultName = '仪表盘';
                else if (isMDU) defaultName = 'MDU';
                else if (isThird) defaultName = '第三区域';
                
                const newName = areaNameInput.value.trim() || defaultName;
                const r = parseInt(redSlider.value);
                const g = parseInt(greenSlider.value);
                const b = parseInt(blueSlider.value);
                const hex = hexColor.value;
                
                // 更新名称
                label.textContent = newName;
                
                // 应用颜色到边框和标签
                element.style.borderColor = hex;
                label.style.color = hex;
                
                // 关闭编辑器
                nameEditModal.classList.add('hidden');
            };
            
            // 设置取消按钮事件
            document.getElementById('nameEditCancel').onclick = function() {
                nameEditModal.classList.add('hidden');
            };
        }

        // RGB转十六进制
        function rgbToHex(r, g, b) {
            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        }

        // 十六进制转RGB
        function hexToRgb(hex) {
            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }

        // 设置RGB滑块事件
        document.getElementById('redSlider').addEventListener('input', updateColorFromSliders);
        document.getElementById('greenSlider').addEventListener('input', updateColorFromSliders);
        document.getElementById('blueSlider').addEventListener('input', updateColorFromSliders);

        // 设置十六进制输入事件
        document.getElementById('hexColor').addEventListener('input', updateColorFromHex);

        // 从滑块更新颜色
        function updateColorFromSliders() {
            const r = parseInt(document.getElementById('redSlider').value);
            const g = parseInt(document.getElementById('greenSlider').value);
            const b = parseInt(document.getElementById('blueSlider').value);
            
            document.getElementById('redValue').textContent = r;
            document.getElementById('greenValue').textContent = g;
            document.getElementById('blueValue').textContent = b;
            
            const hex = rgbToHex(r, g, b);
            document.getElementById('hexColor').value = hex;
            document.getElementById('colorPreview').style.backgroundColor = hex;
        }

        // 从十六进制更新颜色
        function updateColorFromHex() {
            const hex = document.getElementById('hexColor').value;
            const rgb = hexToRgb(hex);
            
            if (rgb) {
                document.getElementById('redSlider').value = rgb.r;
                document.getElementById('greenSlider').value = rgb.g;
                document.getElementById('blueSlider').value = rgb.b;
                
                document.getElementById('redValue').textContent = rgb.r;
                document.getElementById('greenValue').textContent = rgb.g;
                document.getElementById('blueValue').textContent = rgb.b;
                
                document.getElementById('colorPreview').style.backgroundColor = hex;
            }
        }

        // 更新屏幕类型显示
        function updateScreenTypeDisplay() {
            const dashboardArea = document.getElementById('dashboardArea');
            const mduArea = document.getElementById('mduArea');
            let displayText = '双联屏';
            
            if (selectedScreenType === 'single') {
                displayText = '单屏';
                // 隐藏MDU区域
                mduArea.style.display = 'none';
                // 移除第三区域
                const thirdArea = document.getElementById('thirdArea');
                if (thirdArea) thirdArea.remove();
            } else if (selectedScreenType === 'triple') {
                displayText = '三联屏';
                // 显示MDU区域
                mduArea.style.display = 'block';
                // 添加第三个区域
                if (!document.getElementById('thirdArea')) {
                    const thirdArea = document.createElement('div');
                    thirdArea.id = 'thirdArea';
                    thirdArea.className = 'absolute top-64 left-1/2 transform -translate-x-1/2 w-32 h-24 border-2 border-yellow-400 border-dashed rounded-lg cursor-move';
                    thirdArea.draggable = true;
                    
                    const label = document.createElement('div');
                    label.className = 'absolute -top-6 left-0 text-xs text-yellow-400 bg-black bg-opacity-50 px-2 py-1 rounded';
                    label.textContent = '请长按编辑名称';
                    
                    // 添加调整大小的手柄
                    const resizeHandle = document.createElement('div');
                    resizeHandle.className = 'resize-handle absolute bottom-0 right-0 w-4 h-4 bg-yellow-400 bg-opacity-50 rounded-bl-none rounded-tr-none rounded-br-lg cursor-se-resize';
                    
                    thirdArea.appendChild(label);
                    thirdArea.appendChild(resizeHandle);
                    document.querySelector('.absolute.inset-0.z-5').appendChild(thirdArea);
                    
                    const thirdDragCheck = makeDraggable(thirdArea);
                    setupLongPress(thirdArea, thirdDragCheck);
                    setupResize(thirdArea);
                }
            } else {
                // 双联屏
                displayText = '双联屏';
                mduArea.style.display = 'block';
                const thirdArea = document.getElementById('thirdArea');
                if (thirdArea) thirdArea.remove();
            }
            
            document.querySelector('#screenTypeDisplay div:last-child').textContent = displayText;
        }

        // 初始化拖动和长按功能
        const dashboardArea = document.getElementById('dashboardArea');
        const mduArea = document.getElementById('mduArea');
        
        const dashboardDragCheck = makeDraggable(dashboardArea);
        const mduDragCheck = makeDraggable(mduArea);
        
        setupLongPress(dashboardArea, dashboardDragCheck);
        setupLongPress(mduArea, mduDragCheck);

        // 添加调整大小功能
        setupResize(dashboardArea);
        setupResize(mduArea);

        // 初始化屏幕类型显示
        updateScreenTypeDisplay();

        // 设置调整大小功能
        function setupResize(element) {
            const resizeHandle = element.querySelector('.resize-handle');
            let startX, startY, startWidth, startHeight;
            let isResizing = false;
            
            // 鼠标事件
            resizeHandle.addEventListener('mousedown', startResize);
            // 触摸事件
            resizeHandle.addEventListener('touchstart', startTouchResize);
            
            function startResize(e) {
                e.preventDefault();
                e.stopPropagation();
                isResizing = true;
                
                startX = e.clientX;
                startY = e.clientY;
                startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10);
                startHeight = parseInt(document.defaultView.getComputedStyle(element).height, 10);
                
                document.addEventListener('mousemove', resize);
                document.addEventListener('mouseup', stopResize);
            }
            
            function startTouchResize(e) {
                e.preventDefault();
                e.stopPropagation();
                isResizing = true;
                
                startX = e.touches[0].clientX;
                startY = e.touches[0].clientY;
                startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10);
                startHeight = parseInt(document.defaultView.getComputedStyle(element).height, 10);
                
                document.addEventListener('touchmove', touchResize);
                document.addEventListener('touchend', stopResize);
            }
            
            function resize(e) {
                if (!isResizing) return;
                
                const width = startWidth + e.clientX - startX;
                const height = startHeight + e.clientY - startY;
                
                // 设置最小尺寸
                if (width > 40) element.style.width = width + 'px';
                if (height > 30) element.style.height = height + 'px';
            }
            
            function touchResize(e) {
                if (!isResizing) return;
                
                const width = startWidth + e.touches[0].clientX - startX;
                const height = startHeight + e.touches[0].clientY - startY;
                
                // 设置最小尺寸
                if (width > 40) element.style.width = width + 'px';
                if (height > 30) element.style.height = height + 'px';
            }
            
            function stopResize() {
                isResizing = false;
                document.removeEventListener('mousemove', resize);
                document.removeEventListener('mouseup', stopResize);
                document.removeEventListener('touchmove', touchResize);
                document.removeEventListener('touchend', stopResize);
            }
            
            // 更新三联屏创建函数，确保新创建的区域也有调整大小功能
            const originalUpdateScreenTypeDisplay = updateScreenTypeDisplay;
            updateScreenTypeDisplay = function() {
                originalUpdateScreenTypeDisplay();
                
                // 为新创建的第三区域添加调整大小功能
                if (selectedScreenType === 'triple') {
                    const thirdArea = document.getElementById('thirdArea');
                    if (thirdArea && !thirdArea.querySelector('.resize-handle')) {
                        const resizeHandle = document.createElement('div');
                        resizeHandle.className = 'resize-handle absolute bottom-0 right-0 w-4 h-4 bg-yellow-400 bg-opacity-50 rounded-bl-none rounded-tr-none rounded-br-lg cursor-se-resize';
                        thirdArea.appendChild(resizeHandle);
                        setupResize(thirdArea);
                    }
                }
            };
        }
    </script>
</body>
</html>